<template>
  <!-- 展示用背景容器 -->
  <div class="bgContainer">
    <div
      class="bg"
      :style="{
        background: bgColor,
        height: height,
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  props: {
    bgColor: {
      type: String,
      default: "#050801",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
};
</script>
<style lang="scss" scoped>
.bgContainer {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0.5rem;
  border: 1px solid rgb(216, 213, 213);
  .bg {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
  }

  @media screen and (max-width: 790px) {
    .bg {
      min-height: 8rem;
    }
  }
}
</style>
